<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>今天校车考勤</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/student_attendance.css">
	<link rel="stylesheet" href="../css/main.css">
	<style>
		.nochoose {
			border: 1px solid #9A9A9A;
			color: #9A9A9A;
			background: url(../image/nochoose.svg) no-repeat 3.8em 1.1em;
			background-size: 20px 20px;

		}

		.choose {
			border-color: #1296DB !important;
			color: #1296DB !important;
			background-image: url(../image/choose.svg) !important;
		}

		.signin {
			width: 3.5em;
			float: right;
			margin-right: 5vw;
		}

		.signin img {
			width: 18px;
			height: 18px;
			float: right;
		}
	</style>
</head>

<body>
	<div class="contain">
		<div class="header">
			<div class="header_title">学生考勤列表</div>
			<a onclick="history.back()">
				<img src="../image/return.png" alt="" class="return">
			</a>
		</div>
	</div>
	<div style="height: 40px;"></div>

	<div id="vue-root">

		<!-- 学生考勤列表 -->
		<div class="select_all">
			<select class="select_id" v-model="period" v-if="periods.length" style="width: 8em;margin-left: 5%;">
				<option :value="null">请选择时间段</option>
				<option v-for="period1 in periods" v-text="period1" :key="period1" :value="period1">
				</option>
			</select>
		</div>
		<div class="student_list">

			<div class="attentance_list">
				<span>未签到人数:</span>
				<a v-text="(absent.length-resign1.length)+'人'"></a>
				<div class="signin" v-if="chosens.length>0" @click="punchs">
					补签<img src="../image/signin12.svg">
				</div>
				<ul class="students_list">
					<a v-for="item in absent1" :key="item.studentId">
						<li v-text="item.studentName" class="nochoose" :class="{choose:item.chosen}"
							@click="choose(item)"></li>
						<li v-text="item.studentName" v-else></li>
					</a>
				</ul>

			</div>

			<div class="attentance_list" v-if="resign1.length>0">
				<span>补签人数:</span>
				<a v-text="resign1.length+'人'"></a>
				<ul class="students_list">
					<a v-for="item in resign1" :key="item.studentId">
						<li v-text="item.studentName"></li>
					</a>
				</ul>
			</div>

			<div class="attentance_list">
				<span>已签到人数:</span>

				<a v-text="punched.length+'人'"></a>
				<ul class="students_list">
					<a v-for="item in punched" :key="item.studentId" :href="href(item)">
						<li v-text="item.studentName"></li>
					</a>
				</ul>
			</div>
		</div>

	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				punched: [],
				absent: [],
				resign: [],
				periods: [],
				busId: params().busId,
				tripId: params().tripId,
				period: null
			},
			created: function () {
				axios.get('/t/bus/' + this.busId).then(function (res) {
					this.periods = res.data.periods.map(function (it) {
						return it.startTime + '~' + it.endTime;
					});
				}.bind(this));
				this.getData();
			},
			methods: {
				getData: function () {
					axios.get('/t/attendance/trip/' + this.tripId, {
						params: this.search
					}).then(function (res) {
						this.punched = [];
						this.absent = [];
						res.data.forEach(function (it) {
							if (it.punched) this.punched.push(it);
							else this.absent.push(it);
						}.bind(this));
					}.bind(this));
					axios.get('/t/punch/trip/' + this.tripId, {
						params: this.search
					}).then(function (res) {
						this.resign = res.data;
					}.bind(this));
				},
				href: function (item) {
					return '../attendance_record.html?' + Qs.stringify({
						date: dayjs().format('YYYY-MM-DD'),
						studentId: item.studentId,
						type: 1
					});
				},
				punchs: function () {
					axios.post('/t/punchs?type=1', this.chosens.map(function (it) {
						return it.studentId;
					})).then(function (res) {
						this.getData();
						alert('补签成功');
					}.bind(this));
				},
				choose: function (item) {
					Vue.set(item, 'chosen', !item.chosen);
				}
			},
			computed: {
				chosens: function () {
					return this.absent.filter(function (it) {
						return it.chosen;
					})
				},
				resignMap: function () {
					var o = {};
					this.resign.forEach(function (it) {
						o[it] = it;
					});
					return o;
				},
				absent1: function () {
					return this.absent.filter(function (it) {
						return !(it.studentId in this.resignMap);
					}.bind(this));
				},
				resign1: function () {
					return this.absent.filter(function (it) {
						return it.studentId in this.resignMap;
					}.bind(this));
				},
				search: function () {
					if (!this.period) return {};
					var ss = this.period.split('~');
					return {
						startTime: ss[0],
						endTime: ss[1]
					};
				}
			},
			watch: {
				period: function () {
					this.getData();
				}
			}
		});

	</script>


</body>

</html>